<template>
  <view class="policySettingMain">
    <view class="policySettingBox">
      <view class="terminalCard"></view>
      <view class="cardInfo">
        <text>{{ datas.name }}</text>
        <text>服务费：{{ datas.service_fee }}元</text>
      </view>
      <view class="policySettingTwo">
        <view class="title flex align-center">
          <u-icon
            class="uIcon"
            name="setting-fill"
            color="#fb4535"
            size="48"
          ></u-icon>
          支付方式
        </view>
        <view class="twoBox">
          <view class="formItem solid-bottom flex align-center justify-between">
            <view class="left flex align-center justify-between">
              <text>借记卡费率</text>
              <text>{{ datas.dcpay }}%</text>
            </view>
          </view>
          <view class="formItem solid-bottom flex align-center justify-between">
            <view class="left flex align-center justify-between">
              <text>借记卡封顶</text>
              <text>{{ datas.dctop }}元</text>
            </view>
          </view>
          <view class="formItem solid-bottom flex align-center justify-between">
            <view class="left flex align-center justify-between">
              <text>贷记卡费率</text>
              <text>{{ datas.ccpay }}%</text>
            </view>
          </view>
          <view class="formItem solid-bottom flex align-center justify-between">
            <view class="left flex align-center justify-between">
              <text>银联扫码费率</text>
              <text>{{ datas.cuppay }}%</text>
            </view>
          </view>
          <view class="formItem solid-bottom flex align-center justify-between">
            <view class="left flex align-center justify-between">
              <text>支付宝费率</text>
              <text>{{ datas.alipay }}%</text>
            </view>
          </view>
          <view class="formItem solid-bottom flex align-center justify-between">
            <view class="left flex align-center justify-between">
              <text>微信费率</text>
              <text>{{ datas.wxpay }}%</text>
            </view>
          </view>
          <view class="formItem flex align-center justify-between">
            <view class="left flex align-center justify-between">
              <text>T0单笔提现费</text>
              <text>{{ datas.t0 }}元</text>
            </view>
          </view>
        </view>
        <view class="title flex align-center">
          <u-icon
            class="uIcon"
            name="rmb-circle-fill"
            color="#fb4535"
            size="48"
          ></u-icon>
          返现设置
        </view>
        <view class="twoBox">
          <view class="formItem flex align-center justify-between">
            <view class="left flex align-center justify-between">
              <text>激活机器返现</text>
              <text>￥{{ datas.active_reward }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      datas: {},
    };
  },
  onLoad(options) {
    this.datas = options;
  },
};
</script>

<style lang="scss">
.policySettingBox {
  .tip {
    line-height: 80rpx;
    color: #f33;
    font-size: 28rpx;
    padding: 0 32rpx;
  }
  .terminalCard {
    background-image: linear-gradient(to top, #fc6306 0%, #fb4535 100%);
    height: 130rpx;
  }
  .cardInfo {
    margin: -90rpx auto 0;
    text-align: center;
    width: 90%;
    background-color: #fff;
    height: 150rpx;
    line-height: 100rpx;
    border-radius: 30rpx;
    font-size: 34rpx;
    font-family: din;
    & > text:first-child {
      line-height: 10rpx;
    }
    & > text:last-child {
      display: block;
      margin-top: -38rpx;
      font-size: 28rpx;
    }
  }
  .policySettingTwo {
    padding: 0 32rpx;

    .title {
      height: 100rpx;
      font-size: 36rpx;
      color: $uni-text-color;

      .uIcon {
        margin-right: 10rpx;
      }
    }

    .twoBox {
      background-color: #fff;
      border-radius: 10rpx;
      padding: 0 20rpx;
      margin-bottom: 30rpx;

      .formItem {
        height: 100rpx;
        padding: 0 30rpx;

        .left {
          width: 100%;
          padding: 0 30rpx;
          text {
            display: block;
            font-size: 32rpx;
            color: $uni-text-color;
            margin-right: 30rpx;
          }
        }
      }
    }

    > button {
      background-color: #fb4535;
      font-size: 32rpx;
      color: #fff;

      &::after {
        border: none;
      }
    }
  }
}

.agentViewMain {
  position: relative;

  .agentViewHeader {
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    font-size: 32rpx;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background-color: #fff;
    z-index: 9;

    .backView {
      width: 80rpx;
      height: 80rpx;
      position: absolute;
      left: 0;
      top: 0;
    }
  }

  .agentViewSearch {
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    left: 0;
    top: 80rpx;
    background-color: #fff;
    z-index: 9;
  }

  .agentViewBox {
    padding: 184rpx 30rpx 120rpx;

    .agentViewItem {
      height: 100rpx;

      .radioView {
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        border: 2rpx solid #ccc;
      }
    }
  }

  .agentBtnView {
    padding: 20rpx 30rpx;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;

    > button {
      background-color: #fb4535;
      font-size: 32rpx;
      color: #fff;

      &::after {
        border: none;
      }
    }
  }
}

.productViewMain {
  position: relative;

  .productViewHeader {
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    font-size: 32rpx;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background-color: #fff;
    z-index: 9;

    .backView {
      width: 80rpx;
      height: 80rpx;
      position: absolute;
      left: 0;
      top: 0;
    }

    .comfirmView {
      height: 80rpx;
      line-height: 80rpx;
      font-size: 28rpx;
      color: #fb4535;
      padding: 0 30rpx;
      position: absolute;
      right: 0;
      top: 0;
    }
  }

  .productViewBox {
    padding: 80rpx 30rpx 0;

    .productViewItem {
      height: 100rpx;

      .radioView {
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        border: 2rpx solid #ccc;

        &.active {
          border-color: #fb4535;
          background-color: #fb4535;
          position: relative;

          &::before {
            content: "";
            display: block;
            width: 10rpx;
            height: 6rpx;
            background-color: #fff;
            transform: rotate(45deg);
            position: absolute;
            left: 6rpx;
            top: 18rpx;
          }

          &::after {
            content: "";
            display: block;
            width: 22rpx;
            height: 6rpx;
            background-color: #fff;
            transform: rotate(-45deg);
            position: absolute;
            left: 10rpx;
            top: 16rpx;
          }
        }
      }
    }
  }
}
</style>
